<template>
  <header class="navbar">
    <section class="navbar-section">
      <button class="btn btn-primary" :disabled="!has_last" @click="last_que">
        <i class="icon icon-arrow-left"></i>
      </button>
    </section>
    <section class="navbar-center">
      <div class="curr">
        <span class="label label-rounded label-secondary"> {{ index + 1 }} / {{ questions.length }}</span>
      </div>
      <div class="btn-group btn-group-block">
        <button class="btn btn-sm" @click="modal_select">选择</button>
        <button class="btn btn-sm tooltip tooltip-bottom" data-tooltip="即将推出">错题</button>
      </div>
    </section>
    <section class="navbar-section">
      <button class="btn btn-primary" :disabled="!has_next" @click="next_que"><i
          class="icon icon-arrow-right"></i></button>
    </section>
  </header>
  <div class="modal" :class="is_modal_commit ? 'active' : ''">
    <a @click="is_modal_commit = false" class="modal-overlay" aria-label="Close"></a>
    <div class="modal-container">
      <div class="modal-header">
        <a @click="is_modal_commit = false" class="btn btn-clear float-right" aria-label="Close"></a>
        <div class="modal-title h5">确认提交？</div>
      </div>
      <div class="modal-body">
        <p>提交后将不能再修改答案，确认提交吗？</p>
        <div class="content">
          <button class="btn btn-success" @click="commit_all">提交</button>
          <button class="btn btn-primary" @click="is_modal_commit = false">取消</button>
        </div>
      </div>
    </div>
  </div>
  <div class="modal" :class="is_modal_select ? 'active' : ''">
    <a @click="is_modal_select = false" class="modal-overlay" aria-label="Close"></a>
    <div class="modal-container">
      <div class="modal-header">
        <a @click="is_modal_select = false" class="btn btn-clear float-right" aria-label="Close"></a>
        <div class="modal-title h5">选择题目</div>
      </div>
      <div class="modal-body">
        <div class="content">
          <div class="form-group">
            <select class="form-select" @change="select_que" :value="index + 1">
              <option v-for="i in questions.length" :key="i" :value="i">第 {{ i }} 题</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="footer">
    <div class="center" v-if="curr_status === 'exam'">
      <button v-if="!after_exam" class="btn btn-error" @click="modal_commit">提交</button>
      <div v-else class="toast">
        <table v-show="!is_hide_table" class="table">
          <thead>
            <tr>
              <th>-</th>
              <th>单选</th>
              <th>多选</th>
              <th>填空</th>
              <th>判断</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>总数</td>
              <td>60</td>
              <td>10</td>
              <td>10</td>
              <td>20</td>
            </tr>
            <tr>
              <td>分值</td>
              <td>1</td>
              <td>1</td>
              <td>1</td>
              <td>1</td>
            </tr>
            <tr>
              <td>正确</td>
              <td><span class="label label-success">{{ score.radio }}</span></td>
              <td><span class="label label-success">{{ score.checkbox }}</span></td>
              <td><span class="label label-success">{{ score.fillblank }}</span></td>
              <td><span class="label label-success">{{ score.judge }}</span></td>
            </tr>
          </tbody>
        </table>
        <p style="margin-top: 8px;">
          <button class="btn btn-primary btn-sm" @click="toggle_table">{{ is_hide_table ? '显示' : '隐藏' }}</button>
          总分：<span class="label label-warning">
            {{ score.radio + score.checkbox + score.fillblank + score.judge }}</span>，
          <button class="btn btn-primary btn-sm tooltip tooltip-top" data-tooltip="即将推出">全部加入错题</button>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Navbar',
  data() {
    return {
      is_modal_commit: false,
      is_modal_select: false,
      after_exam: false,
      is_hide_table: false,
      score: {
        radio: 0,
        checkbox: 0,
        fillblank: 0,
        judge: 0,
      }
    }
  },
  computed: {
    ...mapState([
      'curr_status',
      'questions',
      'index',
      'user_answer',
      'ques_status'
    ]),
    has_next() {
      return this.$store.state.index < this.$store.state.questions.length - 1
    },
    has_last() {
      return this.$store.state.index > 0
    }
  },
  methods: {
    /**
     * 判断题目正误
     * @param {number} i
     * @returns {boolean}
     */
    judge_ans(i) {
      // 单选题
      if (this.questions[i].questionType === 'radio') {
        this.ques_status[i] = this.questions[i].answer === this.user_answer[i]
      } else if (this.questions[i].questionType === 'checkbox') {
        // 多选题
        const userkey = Array.from(this.user_answer[i]).sort((a, b) => {
          return a.charCodeAt(0) - b.charCodeAt(0)
        }).join(',')
        // console.log(userkey)
        this.ques_status[i] = userkey === this.questions[i].answer
      } else if (this.questions[i].questionType === 'fillblank') {
        // 填空题
        for (let j = 0; j < this.questions[i].options.length; j++) {
          if (this.questions[i].options[j]['content'] !== this.user_answer[i][j]) {
            this.ques_status[i] = false
            return false
          }
        }
        this.ques_status[i] = true
      } else {
        this.ques_status[i] = this.questions[i].answer === this.user_answer[i]
      }
      return this.ques_status[i]
    },
    last_que() {
      if (this.has_last) {
        this.$store.commit('set_index', this.$store.state.index - 1)
      }
    },
    /**
     * 下一题，如果是背诵模式则先检查答案
     */
    next_que() {
      // 如果背诵题目，则先检查答案
      if (this.curr_status === 'practice' &&
        this.ques_status[this.index] === null) {
        this.judge_ans(this.index)
      } else if (this.has_next) {
        this.$store.commit('set_index', this.$store.state.index + 1)
      }
    },
    modal_commit() {
      // 提交试卷
      this.is_modal_commit = true
    },
    modal_select() {
      // 选择题目
      this.is_modal_select = true
    },
    select_que(e) {
      this.$store.commit('set_index', parseInt(e.target.value) - 1)
      this.is_modal_select = false
    },
    toggle_table() {
      this.is_hide_table = !this.is_hide_table
    },
    commit_all() {
      // 提交试卷
      this.is_modal_commit = false
      this.after_exam = true
      for (let i = 0; i < this.questions.length; i++) {
        const res = this.judge_ans(i)
        if (this.questions[i].questionType === 'radio') {
          this.score.radio += res ? 1 : 0
        } else if (this.questions[i].questionType === 'checkbox') {
          this.score.checkbox += res ? 1 : 0
        } else if (this.questions[i].questionType === 'fillblank') {
          this.score.fillblank += res ? 1 : 0
        } else {
          this.score.judge += res ? 1 : 0
        }
      }
    }
  }
}
</script>

<style scoped>
button {
  margin: 0;
}

.curr {
  display: inline-block;
  margin-right: 6px;
}

.content {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.footer {
  left: 0;
  margin: 0;
  padding: 14px;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 100;
}

.footer .center {
  text-align: center;
}
</style>
